import React from "react";
import { Modal, Form, Upload, Button } from "antd";
import { modalPropsType } from "@/constants/types";
import { UploadOutlined } from "@ant-design/icons";
import { useRequest } from "ahooks";
import { fetchDomesticWhOptions } from "@/pages/BasicInfo/services";
import XlSelect from "@/components/Form/XlSelect";

const { Item } = Form;
const rules = [{required: true, message: '此项必填'}];
const labelCol = {span: 5};

const WarehouseEntryImport = ({visible, onCancel, onSubmit, title, loading}: modalPropsType) => {
  const [form] = Form.useForm();
  const {data: warehouseList} = useRequest(fetchDomesticWhOptions);

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  const handleSubmit = async () => {
    const res = await form.validateFields();
    const formData = new FormData();
    formData.append("cwhCode", res?.cwhCode);
    formData.append("cwhName", warehouseList?.find((v:any) => v?.code === res?.cwhCode)?.name);
    formData.append('file', res?.file?.[0]?.originFileObj);
    onSubmit(formData);
  }

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      confirmLoading={loading}
      maskClosable={false}
    >
      <Form form={form} className="modal-form-padding" labelCol={labelCol}>
        <Item label="收货仓库" name="cwhCode" rules={rules}>
          <XlSelect options={warehouseList || []} dataValue="code" dataLabel="name" />
        </Item>
        <Item label="导入订单" name="file" valuePropName="fileList" getValueFromEvent={normFile} rules={rules}>
          <Upload maxCount={1} beforeUpload={() => false}>
            <Button style={{width: 200, height: 30}} icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
        </Item>
      </Form>
    </Modal>
  );
}
export default WarehouseEntryImport;